<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clearfix:after {/* 给浮动元素的父级元素加上class='clearfix' */
            content: "";
            display: block;
            height: 0;
            clear: both;
        }
        .clearfix {
            zoom: 1;/* 在IE6/7中,利用zoom:1触发haslayout属性 */
        }
        ul{
           width: 900px;
           margin: 50px auto;
        }
        li{
            border: 1px solid red;
            width: 200px;
            float: left;
            margin: 20px;
        }
        .mask{
            position: fixed;
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.6);
            top: 0;
            left: 0;
        }
        .mask img{
            width: 80%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./mock.js"></script>
</head>
<body>
    <div id="app">
      <ul class="clearfix">
            <list v-for="item in goodsList" 
            @deleteitem = "deletes"
            :key="item.id" 
            :title.sync="item.title"
            :img-url="item.imgUrl"
            :is-big-imgs-show.sync = "isBigImgShow"
            :big-img-url.sync = "bigPic"
            :id="item.id"></list>
            
      </ul>
      <div class="mask" v-if="isBigImgShow" @click.stop="isBigImgShow = !isBigImgShow">
        <img :src="bigPic" alt="" @click.stop="">
      </div>
    </div>
    <script>
        var mocks = Mock.Random;
        var img = mocks.dataImage('200x100');
        var goodsList = [];
        for(var i = 0 ; i< 5;i++){
            let obj = {};
            obj.id = mocks.guid();
            obj.imgUrl = mocks.dataImage('200x100');
            obj.title = mocks.ctitle();
            goodsList.push(obj);
        }
        var abc = Mock.mock({
            'list|1-10': [{
                'id|+1': 1,
                'email': '@EMAIL'
            }]
        })
        console.log(abc)
        Vue.directive("focus", {
            inserted(el){
                el.focus();
            }
        })
        var vm = new Vue({
            el:"#app",
            data(){
                return {
                    goodsList,
                    bigPic:"",
                    isBigImgShow:false
                }
            },
            methods:{
                deletes(val){
                    var index = this.goodsList.findIndex(ele => ele.id == val);
                    this.goodsList.splice(index , 1);
                }
            },
            components: {
                list:{
                    props:{
                        id:String,
                        title:String,
                        imgUrl:String,
                        "is-big-imgs-show":Boolean,
                        bigImgUrl:String
                    },
                    data(){
                        return {
                            isInputShow:false,
                            
                        }
                    },
                    template:`
                        <li>
                            <div class="top">
                                <img :src="imgUrl" alt="">
                            </div>
                            <div class="cen">
                                <div v-if="!isInputShow">
                                    {{ title }}
                                </div>
                                <input @blur="updateTitle(title)" id="ipt" v-if="isInputShow" type="text" v-model="title">
                            </div>
                            <div class="bot">
                                <button @click="delete1(id)">
                                    删除
                                </button>
                                <button @click="updates">
                                    编辑
                                </button>
                                <button @click="goBigImg(imgUrl)">
                                    查看大图
                                </button>
                            </div>
                        </li>
                    `,
                    methods: {
                        delete1(val){
                            this.$emit("deleteitem",val)
                        },
                        updateTitle(val){
                            this.isInputShow = !this.isInputShow;
                            this.$emit("update:title",val)
                        },
                        updates(){
                            this.isInputShow = !this.isInputShow;
                            
                            this.$nextTick(()=>{
                                var ele = document.getElementById("ipt");
                                ele.focus()
                            })
                            console.log(this.isInputShow)
                        },
                        goBigImg(val){
                            console.log(1231);
                            this.$emit('update:is-big-imgs-show',true);
                            this.$emit('update:bigImgUrl',val);
                        }
                    }
                }
            }
            
        })
    </script>
</body>
</html>